<template>
  <!-- 定义路由出口 -->
  <div>
    <!-- 
       router-link默认被解析成a标签，如果不想被解析成a标签，可以通过tag属性去改
           tag='标签名'
       to:跳转url地址，要和路由规则中path定义的路径一样
       activeClass:活动时候定义的class  高亮，激活
    -->
    <router-link to="/index" tag="button" activeClass="active">首页</router-link>
    <router-link to="/list" tag="button" activeClass="active">列表页</router-link>
    <router-link to="/detail" tag="button" activeClass="active">详情页</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted(){
    console.log(this.$route);
  }
};
</script>

<style>
/* .router-link-active{
  background: teal;
  color:#fff
} */

.active {
  background: teal;
  color: #fff;
}
</style>